<template>
  <el-card class="box-card">
    <div slot="header" class="card-header clearfix">
      <h5 class="title pull-left">{{ renderData.meetingtitle }}</h5>
      <el-button
        type="text"
        icon="el-icon-edit"
        size="small"
        class="btn pull-right"
        @click="toMeetingEdit"
      >编辑</el-button>
    </div>

    <div class="card-wrapper">
      <el-row>
        <el-col :span="18">
          <el-row>
            <el-col :span="12">
              <strong>会议类型：</strong>
              <el-tag effect="plain">{{ renderData.typeName }}</el-tag>
            </el-col>
            <el-col :span="12">
              <strong>参会类型：</strong>
              <el-tag effect="plain">{{ renderData.meetingTypeName }}</el-tag>
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="12"><strong>召开时间：</strong>{{ renderData.begintime }}</el-col>
            <el-col :span="12"><strong>结束时间：</strong>{{ renderData.endtime }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="24">
              <strong>会议状态：</strong>
              <el-tag
                v-if="renderData.meetingstatus === 0"
                effect="plain"
              >未开始</el-tag>
              <el-tag
                v-else-if="renderData.meetingstatus === 1"
                effect="plain"
              >未开放预约</el-tag>
              <el-tag
                v-else-if="renderData.meetingstatus === 2"
                effect="plain"
              >已开始</el-tag>
              <el-tag
                v-else-if="renderData.meetingstatus === 3"
                effect="plain"
              >已结束</el-tag>
              <el-tag
                v-else
                effect="plain"
                type="info"
              >暂无</el-tag>
            </el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="12"><strong>会议CODE：</strong>{{ renderData.meetingcode }}</el-col>
            <el-col :span="12"><strong>OM编码：</strong>{{ renderData.omcode }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="24"><strong>省份城市：</strong>{{ renderData.province }} {{ renderData.city }}</el-col>
          </el-row>
          <el-divider />
          <el-row>
            <el-col :span="24"><strong>召开地点：</strong>{{ renderData.location }}</el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="text-center">
          <div class="qrcode-wrapper text-center">
            <h5 class="title">签到二维码</h5>
            <img :src="renderData.signInCodeurl" alt="" class="qrcode-img">
            <p>
              <el-button
                size="mini"
                icon="el-icon-download"
                round
                @click="downloadQr(renderData.signInCodeurl, '签到二维码')"
              >获取二维码</el-button>
            </p>
          </div>
        </el-col>
      </el-row>
      <el-divider />
      <el-row v-if="!_.isEmpty(renderData.lecturer)">
        <el-col :span="24">
          <strong>讲师姓名：</strong>
          <span
            v-for="(item, index) in renderData.lecturer"
            :key="index"
          >{{ item }}<el-divider v-if="index !== renderData.lecturer.length - 1" direction="vertical" /></span>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.lecturer)" />
      <el-row v-if="!_.isEmpty(renderData.buList)">
        <el-col :span="24">
          <strong>BU：</strong>
          <el-tag
            v-for="item in renderData.buList"
            :key="item.id"
            effect="plain"
          >{{ item.bu }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.buList)" />
      <el-row v-if="!_.isEmpty(renderData.taList)">
        <el-col :span="24">
          <strong>TA：</strong>
          <el-tag
            v-for="item in renderData.taList"
            :key="item.id"
            effect="plain"
          >{{ item.ta }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.taList)" />
      <el-row v-if="!_.isEmpty(renderData.brand)">
        <el-col :span="24">
          <strong>相关产品：</strong>
          <el-tag
            v-for="item in renderData.brand"
            :key="item.id"
            effect="plain"
          >{{ item.brand }}</el-tag>
        </el-col>
      </el-row>
      <el-divider v-if="!_.isEmpty(renderData.brand)" />
      <el-row>
        <el-col :span="24"><strong>会议简介：</strong>{{ renderData.meetingdesc }}</el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import {
  getMeetingShow
} from '@/api/meetings'

export default {
  name: 'OfflineMeetingDetail',
  props: {
    meetingId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      renderData: {}
    }
  },
  created() {
    this.fetchData(this.meetingId)
  },
  methods: {
    fetchData(id) {
      getMeetingShow({ id }).then(response => {
        const { data } = response
        // console.log(data)
        this.renderData = data
        this.$emit('getMeetingData', { data })
      }).catch(err => {
        console.log(err)
      })
    },
    toMeetingEdit() {
      this.$router.push(`/offline-meetings/edit/${this.meetingId}`)
    },
    downloadQr(qrAddress, title) {
      const link = document.createElement('a')
      link.href = qrAddress
      link.download = `${this.renderData.meetingtitle} - ${title}`
      link.click()
    }
  }
}
</script>

<style lang="scss" scoped>
.cover-img {
  height: 200px;
  max-width: 100%;
}
.qrcode-wrapper {
  .title {
    margin: 0;
  }
}
.qrcode-img {
  width: 200px;
  max-width: 100%;
}
.share-icon {
  height: 200px;
  max-width: 100%;
}
</style>
